<template>
  <div class="week">
    <div class="week-desc">
      <div class="week-desc-content">
        /////////////<span>周末出游</span>/////////////
        <p>致力推荐超完美套餐</p>
      </div>
    </div>
    <div class="week-swiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item of weekendList" :key="item.id">
          <div class="weekSwiper-item">
            <div class="weekSwiper-item-img">
              <img :src="item.imgUrl"/>
            </div>
            <div class="weekSwiper-item-desc">
              {{item.desc}}
              <p>{{item.detail}}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
    name: 'homeWeekend',
    props: {
      weekendList: Array
    },
    data() {
      return {s
        swiperOption: {
          freeMode: true,
          spaceBetween: 20,
          slidesPerVire: 3
        }
    }
}</script>

<style lang="stylus" scoped>
  .week
  overflow:hidden
  height:0
  padding-bottom:58%
  border-top:.2rem solid #eee

  .week-desc
  position:relative
  overflow:hidden
  height:0
  padding-bottom:15.5%

  .week-desc-content
  text-align:center
  color:#aaa
  positon:absolute
  top:50%
  left:50%
  transform:translate(-50%,-50%)


  .week-desc-content > span
  display:inline-block
  color:#000
  font-weight:bold
  margin:.15rem .3rem

  .week-swiper
  overflow:hidden
  width:100%
  height:0
  padding-bottom:84.5%

  .weekSwiper-item
  overflow:hidden
  width:100%
  height:0
  padding-bottom:120%
  margin-left:.2rem
  border:.02rem solid #ccc

  .weekSwiper-item-img
  overflow:hidden
  height:0
  padding-bottom:67.9%

  .weekSwiper-item-img > img
  max-width:100%

  .weekSwiper-item-desc
  text-align:center
  padding-top:.3rem

  .weekSwiper-item-desc>p
  display:inline-block
  margin-top:.1rem
</style>
